<template>
  <div class="route-query">
    <el-form :model="queryForm" label-position="top">
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="queryForm.startTime"
              type="datetime"
              placeholder="选择开始时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width: 100%;"
              :clearable="false"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="queryForm.endTime"
              type="datetime"
              placeholder="选择结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width: 100%;"
              :clearable="false"
            />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="16" class="button-row">
        <el-col :span="12">
          <el-button 
            type="primary" 
            @click="$emit('query-track')" 
            :loading="loading"
            style="width: 100%;"
            icon="Search"
          >
            查询轨迹
          </el-button>
        </el-col>
        <el-col :span="12">
          <el-button 
            type="success"
            @click="$emit('get-current-location')" 
            :loading="locationLoading"
            style="width: 100%;"
            icon="Aim"
          >
            当前位置
          </el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
const props = defineProps({
  queryForm: {
    type: Object,
    required: true
  },
  loading: {
    type: Boolean,
    default: false
  },
  locationLoading: {
    type: Boolean,
    default: false
  }
})

defineEmits(['query-track', 'get-current-location'])
</script>

<style lang="scss" scoped>
.route-query {
  .button-row {
    margin-top: 16px;
  }
  
  :deep(.el-form-item__label) {
    color: #606266;
    font-weight: 500;
    margin-bottom: 8px;
  }
  
  :deep(.el-button) {
    height: 40px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
  }
  
  :deep(.el-date-editor) {
    border-radius: 8px;
    border: 2px solid #e4e7ed;
    transition: all 0.3s ease;
    
    &:hover {
      border-color: #c0c4cc;
    }
    
    &.is-active,
    &:focus-within {
      border-color: #409eff;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
    }
  }
}

/* 确保下拉菜单等组件在最上层 */
:global(.el-select-dropdown) {
  z-index: 9999 !important;
}

:global(.el-picker-panel) {
  z-index: 9999 !important;
}
</style>